import { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import { AtTag } from 'taro-ui';
import './index.scss';

interface IOptions {
  value: string | number;
  name: string;
  number: number;
}

interface IProps {
  active: number | string;
  onChange?: (id: number | string) => void;
  list: IOptions[];
  type: string;
}

export default function ({ active, list, onChange, type }: IProps) {
  console.log('list1', list);
  const [_active, setActive] = useState(active);
  const _onChange = (value: string | number) => {
    setActive(value);
    onChange && onChange(value);
  };

  useEffect(() => {
    setActive(active);
  }, [active]);

  return (
    <View className="select-component">
      {list.map((item) => {
        return (
          <AtTag
            key={item.value}
            type="primary"
            className={_active === item.value ? 'active' : ''}
            size="small"
            onClick={() => _onChange(item.value)}
            disabled={type !== 'service' && item.number <= 0}
          >
            {item.name}
          </AtTag>
        );
      })}
    </View>
  );
}
